<script setup>
// 假设我们有一个函数来生成阴影字符串（这里为了示例简单，我们使用静态值）
const generateShadows = (count) => {
  // 在实际应用中，这里应该是根据count动态生成阴影的逻辑
  // 但由于SCSS的限制，我们在这里无法直接实现随机数
  // 因此，我们使用静态值作为占位符
  let shadows = '0 0 10px #fff, 0 0 20px #fff'
  // 如果需要更多阴影，可以手动添加或根据count计算
  // 但请注意，这里只是为了示例
  return shadows
}

// 为每个图层生成一个唯一的类名，该类名包含其阴影
const layerClasses = computed(() => {
  const classes = {}
  for (let i = 1; i <= 5; i++) {
    const count = 1300 >> (i - 1) // 使用位右移来模拟除以2的幂次
    const shadows = generateShadows(count)
    classes[`layer-shadow-${i}`] = {
      boxShadow: shadows
    }
  }
  return classes
})
</script>

<template>
  <div class="box">
    <div
      v-for="i in 5"
      :key="i"
      :class="'layer' + i"
      :style="
        layerClasses['layer-shadow-' + i].boxShadow
          ? { boxShadow: layerClasses['layer-shadow-' + i].boxShadow }
          : {}
      "
    ></div>
  </div>
</template>

<style scoped lang="scss">
$size: 20px;
$duration: 800s;
.box {
  height: 100vh;
  width: 100vw;
  background: black;
  position: relative;
  overflow: hidden; // 防止滚动
}

.layer1,
.layer2,
.layer3,
.layer4,
.layer5 {
  position: fixed;
  width: $size * 1; // 初始大小，可以根据需要调整
  height: $size * 1;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); // 居中
  animation: moveUp $duration * (5 - 9 + 1) linear infinite; // 注意：这里的_i是伪代码，实际中需要其他方式处理
}


@keyframes moveUp {
  to {
    transform: translateY(-100vh);
  }
}
</style>
